<template>
  <div id="rich"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
import 'echarts-extension-amap'
let myRich = null;
let myEchart = null;
onMounted(() => {
  myRich = document.getElementById("rich");
  myEchart = echarts.init(myRich, null, {
    locale: "ZH",
    width: 800,
    height: 600
  });
  let option = {
    // 使用高德地图
    amap: {
      // 开启高德地图
      center: [117.190182, 39.125596], // 设定中心点坐标
      zoom: 10, // 设定缩放级别
    },
    series: [{
        type: 'scatter',
        coordinateSystem: 'amap', // 使用高德地图坐标系
        data: [
            {
                name: '点1',
                value: [116.397428, 39.90923, 50]
            },
            {
                name: '点2',
                value: [116.487428, 39.98923, 50]
            }
        ],
    }]
  };
  myEchart.setOption(option);
});
onUnmounted(() => {
  myEchart.dispose(myRich);
});
</script>

<style lang="less" scoped>
#rich {
  width: 800px;
  height: 400px;
  position: relative;
}
</style>
